<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>后台</title>
	 <link rel="stylesheet" type="text/css" href="/css/css.css">
	 <link rel="stylesheet" type="text/css" href="/font-awesome-4.7.0/css/font-awesome.min.css">
	 <link  rel="stylesheet" type="text/css" href="/css/lyz.calendar.css" />
     <script src='/js/vue/vue.js'></script>
     <script src='/js/jquery.js'></script>
     <script src='/js/layer.js'></script>
     <script src='/js/funclayer.js'></script>
</head>

<body>
	{include file='index/public/header'}
<div class="left">
{include file='index/public/left'}
</div>
<div id="right">
	  <table width="84.8%" border="0" cellspacing="0" cellpadding="0">
	              <tr>
		           <td class='td_text'>商品名称：</td>
			   <td class='td_html'><input type='text' style='width:200px;height:25px;' v-model='sp.sp_name'/></td>
		      </tr>
		      <tr>
		           <td class='td_text'>商品分类：</td>
			   <td class='td_html'>
			       <select style='height:30px;' v-model='sp.fl_id'>
				       <option value='0' selected>请选择</option>
				   {volist name="fl" id="vo" }
				        <option value='{$vo.id}'>{$vo.fl_name}</option>
				   {/volist}
				   </select>
			   </td>
		      </tr>
		      <tr>
		           <td class='td_text'>品牌名称：</td>
			   <td class='td_html'>
			       <select style='height:30px;' v-model='sp.brand_id'>
				       <option value='0' selected>请选择</option>
				   {volist name="brand" id="vo" }
				        <option value='{$vo.id}'>{$vo.brand_name}</option>
				   {/volist}
				   </select>
			   </td>
		      </tr>

		      <tr>
		           <td class='td_text'>商品规格：</td>
			   <td class='td_html' title='okookok'>
			        <a href='javascript:;' class='brand_a' @click='stand_list()'>选择规格</a><a href='javascript:;' class='brand_a' style='margin-left:4px;' @click='clear()'>关闭规格</a>
			   </td>
		      </tr>

              <tr  style='display:none' class='standlist'>
		           <td class='td_text'>规格信息：</td>
			       <td class='td_html' style='height:20px;' v-html='standlist'>
			       </td>
		      </tr>


			  <tr>
		           <td class='td_text'>商品价格：</td>
			   <td class='td_html' style='height:40px;'><input type='number' name='mony' value='0' v-model='sp.sp_mony'/>元，<input type='number' v-model='sp.sp_ku'/>库存</td>
		      </tr>
			  <tr>
		           <td class='td_text'>商品运费：</td>
			   <td class='td_html' style='height:20px;'><input type='number' value='0' v-model='sp.sp_runmony'/>元</td>
		      </tr>

			  <tr>
		           <td class='td_text'>商品精选：</td>
			   <td class='td_html' style='height:20px;'><input type='radio' value='新品'  v-model='sp.sp_type'/>新品 <input type='radio' value='精品'  v-model='sp.sp_type'/>精品</td>
		      </tr>

		        <tr>
		           <td class='td_text'>商品概述：</td>
			   <td class='td_html' style='height:20px;'><textarea v-model='sp.sp_details' style='width:200px;height:140px;resize:none;'>123</textarea></td>
		      </tr>
            <tr>
		           <td class='td_text'>商品图片：</td>
			   <td class='td_html' style='height:120px;display:flex;justify-content:space-between;>
			     '>
			       <label style="opacity: 1; width: 13%; height: 85%; display: block; cursor: pointer; background: rgb(255, 255, 255);">
			       <form id="uploadForm1" enctype="multipart/form-data" width='100%' style='height:120px;display:flex;'>
				       <input type='file' name='file' @change='get_file(1);' class='file_img'/>
				     </form>
				   <img src='{$img[0] | default="/image/file_img.jpg"}' width='100%' height='100%'/></label>
				    <label style="opacity: 1; width: 13%; height: 85%; display: block; cursor: pointer; background: rgb(255, 255, 255);">
					  <form id="uploadForm2" enctype="multipart/form-data" width='100%' style='height:120px;display:flex;'>
				       <input type='file' name='file' @change='get_file(2);' class='file_img'/>
				     </form>
					<img src='{$img[1] | default="/image/file_img.jpg"}' width='100%' height='100%'/></label>
					 <label style="opacity: 1; width: 13%; height: 85%; display: block; cursor: pointer; background: rgb(255, 255, 255);">
					   <form id="uploadForm3" enctype="multipart/form-data" width='100%' style='height:120px;display:flex;'>
				       <input type='file' name='file' @change='get_file(3);' class='file_img'/>
				     </form>
					 <img src='{$img[2] | default="/image/file_img.jpg"}' width='100%' height='100%'/></label>
					  <label style="opacity: 1; width: 13%; height: 85%; display: block; cursor: pointer; background: rgb(255, 255, 255);">
					     <form id="uploadForm4" enctype="multipart/form-data" width='100%' style='height:120px;display:flex;'>
				       <input type='file' name='file' @change='get_file(4);' class='file_img'/>
				     </form>
					  <img src='{$img[3] | default="/image/file_img.jpg"}' width='100%' height='100%'/></label>
					   <label style="opacity: 1; width: 13%; height: 85%; display: block; cursor: pointer; background: rgb(255, 255, 255);">
					       <form id="uploadForm5" enctype="multipart/form-data" width='100%' style='height:120px;display:flex;'>
				       <input type='file' name='file' @change='get_file(5);' class='file_img'/>
				     </form>
					   <img src='{$img[4] | default="/image/file_img.jpg"}' width='100%' height='100%'/></label>
			   </td>
		      </tr>
			   <tr>
		           <td class='td_text'>商品详情：</td>
			   <td class='td_html' style='height:150px;'><script type="text/plain" id="container" name="nr">{if isset($details)}{$details}{/if}</script></td>
		      </tr>
		       <tr>
		           <td class='td_text'></td>
			   <td class='td_html'><input type='button' class='tjbtn' value='提交' {if isset($sp)}@click='outlist("{$sp['id']}")'{else}@click='outlist()'{/if}/></td>
		      </tr>
		</table>
</div>
</body>
</html>
<script src='/js/jquery.js'></script>
    <script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
	<script>
	    var editor = new baidu.editor.ui.Editor();
        editor.render("container");

       
	</script>
<script>
window.img_list=new Array();
if("{$img[0] | default=0}"!=0){
	 $('label').each(function(){
	 	if($(this).find('img').attr('src')!='/image/file_img.jpg'){
	 	  window.img_list[$(this).index()]=$(this).find('img').attr('src');
	 	}
	 });
}
   new Vue({
     el:"#right",
     data:{
     	stand_arr:[],
     	table_title:[],
        standlist:'',
        sp:{
           sp_name:"{$sp['sp_name'] | default=''}",
           sp_mony:"{$sp['sp_mony'] | default=0}",
           sp_runmony:"{$sp['sp_runmony'] | default=0}",
           sp_ku:"{$sp['sp_ku'] | default=0}",
           fl_id:"{$sp['fl_id'] | default=0}",
           brand_id:"{$sp['brand_id'] | default=0}",
           sp_details:"{$sp['sp_details'] | default=''}",
		   sp_type:"{$sp['sp_type'] | default='新品'}",
        }
     },methods:{
     	get_file(index){
     		let self=this;
     		$.ajax({
                    url: '/admin.php/sp/icon',
                     type: 'POST',
                     cache: false,
                     data: new FormData($('#uploadForm'+index)[0]),
                     processData: false,
                     contentType: false,
			         dataType:'json',
			         success:function(res){
			             if(res.status=='ok'){
			                    _.msg('上传成功！',1,1500);
                               window.img_list[parseInt(index)-parseInt(1)]="/"+res.file_url;
                               $('label').eq(parseInt(index)-parseInt(1)).find('img').attr('src',"/"+res.file_url);
			             }else{
			                  _.msg('上传失败！',2,1500);
			             }
			           }
                    });
     	},
	     stand_list(){
             layer.open({
               type: 2,
               title: '选择规格',
               shadeClose: true,
               shade: 0.1,
               area: ['60%', '68%'],
               content: '/admin.php/sp/stand_list' //iframe的url
             }); 
	     },
	     getlist(data={}){
	     	let self=this;
	     	 $.ajax({
	     	 	url:'/admin.php/sp/getstand_list',
	     	 	data:data,
	     	    dataType:'json',
	     	    success:function(res){
                   if(res.status=='ok'){
                         self.standlist=res.list; 
                   }else{
                      layer.msg('请选择规格！', {time: 1500,icon:7});
                   }
	     	    } 
	     	 });
	     },clear(){
	     	 $.ajax({
	     	 	url:'/admin.php/sp/clear_list',
	     	    success:function(){
                   $('.standlist').hide();
                }
	     	 });
	     },outlist(id=0){
	     	if(id){
	     		var url='/admin.php/sp/spall_insert/id/'+id;
	     	}else{
	     		var url='/admin.php/sp/spall_insert/id'; 
	     	}
	     	var mony=[];
	     	var ku=[];
	     		var i=0;
	     	$('.stand_mony').each(function(){
	     	    mony[i]=new Array();
	     		$(this).find('tr').each(function(){
	     			 mony[i][$(this).index()]=$(this).find('td').find('input').val();
	     			 
	     		});

	     			i++;
	     	});
	     	i=0;
	     	$('.ku').each(function(){
	     	    ku[i]=new Array();
	     		$(this).find('tr').each(function(){
	     			 ku[i][$(this).index()]=$(this).find('td').find('input').val();
	     			 
	     		});

	     			i++;
	     	});
	     	 _.msg('正在提交...',16,20000);
	     	let self=this;
	     	 var img_list=window.img_list;
	     	 var details=editor.getContent('container');
             $.ajax({
             	 url:url,
             	 data:{'sp':self.sp,'img_list':img_list,'details':details,'mony':mony,'ku':ku,'stand_arr':self.stand_arr},
             	 dataType:'json',
             	 type:'post',
             	 success:function(res){
                      if(res.status=='ok'){
                      	if(id==0){
                           _.msg('添加成功！',1,1500);
                           setTimeout(function(){
                           	  location.href='/admin.php/sp';
                           },1600);
                      	}else{
                      		_.msg('编辑成功！',1,1500);
                      		setTimeout(function(){
                           	  history.back(-1);
                           },1600);
                      	}
                      }else{
                      	if(id==0){
                           _.msg('添加失败！',7,1500);
                      	}else{
                      		_.msg('编辑失败！',7,1500);
                      	}
                           
                      }
                 }
             });
	     }
	  },created(){
	  		let self=this;
	  	if("{$sp.id | default=0}"!=0){
	  		$.ajax({
	  			 url:'/admin.php/sp/stand_list_save',
	  			 data:{'id':"{$sp.id | default=0}"},
	  			 dataType:'json',
	  			 type:'post',
	  			 success:function(res){
                     if(res.status=='ok'){
                	 	self.standlist=res.list;
                	 	self.table_title=res.title;
                	 	 self.stand_arr=res.arr;
                	 	$('.standlist').show();
                	 }
	  			 }
	  		});
	  	}
	  	 window['getlist']=(list)=>{
            self.standlist=list.list;
           self.table_title=list.title;
           self.stand_arr=list.arr;
            $('.standlist').show();
	  	 } 
	  }
   });
</script>
<style>
   #right table tr{
    height: 50px;
    border:0px;
   }
  #right table tr .td_text{
      text-align:center;
      width:10%;
   }
    #right table tr .td_html{
      width:90%;
   }
   .tjbtn {
    background: #FF5722;
    width: 100px;
    height: 38px;
    text-align: center;
    line-height: 38px;
    border-radius: 2px;
    font-family: '微软雅黑';
    color: #fff;
    border: 0;
    font-size: 15px;
    cursor: pointer;
}
input[type=number]{
   width:100px;
   height:25px;
}
.file_img{
  display:none;
}
.brand_a{
	 float:left;
	 border:1px solid #ccc;
	 width:70px;
	 height:25px;
     line-height:25px;
     font-size:13px;
     color:#ccc;
     text-align:center;
     border-radius:2px;
}
.list{
	 border: 1px #f1f1f1 solid;
	 border-right:1px #f1f1f1 solid;
}
.list .bgtt {
    background: #f2f6fc;
    color: #888;
    font-weight: normal;
}
.list th {
    padding: 7px 5px;
    color: #666;
    text-align: center;
    font-size: 12px;
}
.list .td {
    padding: 10px 5px;
    height: 28px;
    line-height: 28px;
    font-size: 13px;
    color: #666;
    border-top: 1px #f1f1f1 solid;
    border-right:1px #f1f1f1 solid;
    text-align:center;
}

.list_ tr td{
	text-align:center;
	border-bottom:1px solid #f1f1f1;
}
</style>

